<!-- src/components/ThemeSwitch.vue -->
<template>
  <el-switch
    v-model="isDark"
    class="theme-switch"
    :active-icon="Moon"
    :inactive-icon="Sunny"
    @change="toggleTheme"
  />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Moon, Sunny } from '@element-plus/icons-vue'
// import { useDark, useToggle } from '@vueuse/core'

// const isDark = useDark()
// const toggleDark = useToggle(isDark)
const isDark = ref(false)
const toggleTheme = (value: boolean) => {
  // toggleDark()
  isDark.value = value
  // 切换 Element Plus 主题类名
  document.documentElement.className = value ? 'dark' : ''
}

onMounted(() => {
  // 初始化主题
  document.documentElement.className = isDark.value ? 'dark' : ''
})
</script>

<style scoped>
.theme-switch {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100;
}
</style>